// ==UserScript==
// @name         法宣在线学习助手
// @namespace    http://tampermonkey.net/
// @version      2024-10-27
// @description  提高效率，节省时间
// @author       ElyarEnwer
// @match        http://www.faxuanyun.com/bps/frame/t/frame.html?loginUserAccount=*
// @icon         http://www.faxuanyun.com/dsbaseui/images/favicon.ico
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
    addStyle();
    // 添加下拉菜单
    wait_until("#xxCourse", (xxLearnButton) => {
        //为选修按钮添加下拉菜单
        let xxMenu1 = createElement('div', {'textContent': '一键学习'}, 'click', e => {
            alert("new xxMenu1 Method");
        });
        createDropMenu(xxLearnButton[0], [xxMenu1]);

    });
    wait_until('#bxCourse', bxLearnButtonm => {
        //为必修按钮添加下拉菜单
        let bxMenu1 = createElement('div', {'textContent': '一键学习'}, 'click', e => {
            alert("new bxMenu1 Method");
        });
        createDropMenu(bxLearnButtonm[0], [bxMenu1]);
    });
    // Your code here...
})();


/**
 *  检测目标元素是否加载完毕
 * @param selector 检测目标元素
 * @param callback 回调函数
 */
function wait_until(selector, callback) {
    var timer = setInterval(() => {
        let target = document.querySelectorAll(selector);
        if (target.length > 0) {
            clearInterval(timer);
            console.log("目标加载完毕");
            callback(target);
        }
    }, 50);
}

/**
 *  创建类型
 * @param type 元素类型
 * @param option 选项-（id，class，textContent）
 * @param event 事件类型
 * @param func 事件回调函数
 */
function createElement(type, option, event, func) {
    let ele = document.createElement(type);
    if (option.id) {
        ele.id = option.id;
    }
    if (option.class) {
        ele.className(option.class);
    }
    if (option.textContent) {
        ele.textContent = option.textContent;
    }
    ele.addEventListener(event, func);
    return ele;
}

/**
 * 创建下拉菜单
 */
function createDropMenu(target, menus) {
    // 创建下拉菜单
    const dropdownMenu = document.createElement('div');
    dropdownMenu.className = 'dropdown-menu';
    for (var i = 0; i < menus.length; i++) {
        dropdownMenu.appendChild(menus[i]);
    }
    document.body.appendChild(dropdownMenu); // 先添加到body中，稍后再设置位置

    // 添加鼠标事件监听器
    target.addEventListener('mouseover', function (event) {
        // 检查按钮是否具有“active”类
        const rect = target.getBoundingClientRect();
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        dropdownMenu.style.left = `${rect.left}px`;
        dropdownMenu.style.top = `${rect.bottom + scrollTop}px`;
        dropdownMenu.style.display = 'block';
    });

    target.addEventListener('mouseout', function () {
        setTimeout(() => {
            if (!target.matches(':hover') && !dropdownMenu.matches(':hover')) {
                dropdownMenu.style.display = 'none';
            }
        }, 100); // 延迟检查是否鼠标移出按钮和下拉菜单范围
    });

    // 防止下拉菜单被误触发消失（当鼠标移动到下拉菜单上时保持显示）
    dropdownMenu.addEventListener('mouseover', function () {
        dropdownMenu.ignoreMouseOut = true; // 添加一个自定义属性来标记鼠标是否在下拉菜单上
    });

    dropdownMenu.addEventListener('mouseout', function () {
        setTimeout(() => {
            if (!target.matches(':hover') && !dropdownMenu.matches(':hover') && !dropdownMenu.ignoreMouseOut) {
                dropdownMenu.style.display = 'none';
                delete dropdownMenu.ignoreMouseOut; // 清除自定义属性
            } else if (dropdownMenu.ignoreMouseOut) {
                delete dropdownMenu.ignoreMouseOut; // 鼠标已经离开下拉菜单，清除自定义属性
            }
        }, 100); // 延迟检查
    });

    // 可选：如果页面有滚动条，确保下拉菜单在滚动时仍然正确显示
    window.addEventListener('scroll', function () {
        if (dropdownMenu.style.display === 'block') {
            const rect = target.getBoundingClientRect();
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            dropdownMenu.style.left = `${rect.left}px`;
            dropdownMenu.style.top = `${rect.bottom + scrollTop}px`;
        }
    });
}

/**
 * 创建css样式
 */
function addStyle() {
    // 创建一个样式元素，用于下拉菜单的样式
    const style = document.createElement('style');
    style.innerHTML = `
        .dropdown-menu {
            display: none;
            position: absolute;
            background-color: white;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            cursor: pointer; 
        }
        .dropdown-menu div {
            background-color:#bf0614;
            color:white;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        .dropdown-menu div:hover {
            background-color: #d43340;
        }
    `;
    document.head.appendChild(style);
}
